<template>
  <div class="lifting-device-container">
    <div class="main" v-loading="loading">
      <a-row :gutter="20">
        <a-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="12"
          :xxl="6"
          v-for="item in deviceData"
          :key="item.id"
        >
          <div class="equipment">
            <div class="icon">
              <img src="https://jszhgd.cn/static/pc/equipment-app/lmd_1.png" />
            </div>
            <div class="operate">
              <div class="name">{{ item.equName || "--" }}</div>
              <div class="status">
                <div>
                  状态：<span :class="[checkClass(item.onlineStatus)]">
                    {{ checkStatus(item.onlineStatus) }}
                  </span>
                </div>
                <div class="view-details" @click="gotoDetail(item)">
                  查看详情<a-icon type="right-circle" theme="filled" />
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <div class="empty-container" v-if="deviceData.length == 0">
        <a-empty />
      </div>
    </div>
    <!-- 实时监测 -->
    <homePage :visible.sync="homeVisible" :equCode="equCode"></homePage>
  </div>
</template>

<script>
import homePage from "./components/home.vue";
import { getLMDEquipment } from "@/api/wisdom-beam/collect-app.js";
export default {
  components: {
    homePage,
  },
  data() {
    return {
      loading: false,
      homeVisible: false,
      deviceData: [],
      equCode: "",
    };
  },
  mounted() {
    this.getEquipmentData();
  },
  methods: {
    checkClass(key) {
      switch (key) {
        case true:
          return "normal";

        case false:
          return "error";

        default:
          return "cancel";
      }
    },

    checkStatus(key) {
      switch (key) {
        case true:
          return "在线";

        case false:
          return "离线";

        default:
          return "--";
      }
    },

    //查询所有设备
    getEquipmentData() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        getLMDEquipment()
          .then((res) => {
            let { data } = res;
            this.deviceData = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.deviceData = [];
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //跳转详情页
    gotoDetail(item) {
      this.equCode = item.equCode;
      this.homeVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.lifting-device-container {
  height: 100%;
  .flex();
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 0px 0px 10px;
  .main {
    flex: 1;
    height: 100%;
    padding: 10px 10px 0 0;
    .custom-scrollbar();
    overflow: overlay !important;
    position: relative;
    .equipment {
      height: 385px;
      background: #fff;
      margin-bottom: 20px;
      border-radius: 4px;
      padding: 20px 20px 0 20px;
      display: flex;
      flex-direction: column;
      transition: 0.2s;
      cursor: pointer;
      &:hover {
        box-shadow: 0px 0px 16px 0px rgba(150, 160, 172, 0.2);
      }
      .icon {
        height: 270px;
        background: #f6f9ff;
        img {
          height: 100%;
          width: 100%;
          object-fit: contain;
        }
      }
      .operate {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .name {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
          padding-bottom: 10px;
        }
        .status {
          display: flex;
          color: #999;
          justify-content: space-between;
          align-items: center;
          .normal {
            color: #2fba4b;
          }
          .error {
            color: #ff3f4a;
          }
          .cancel {
            color: #aab0bc;
          }

          .view-details {
            color: var(--primary-color);
            cursor: pointer;
            .anticon {
              margin-top: 6px;
              margin-left: 4px;
            }
          }
        }
      }
    }
    .empty-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
